﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>上传点云</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all"/>
    <style>
        .morepointcloud {
            display: none;
        }
    </style>
</head>
<body>
<div style="margin: 15px;">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <!--<legend>响应式的表单集合</legend>-->
    </fieldset>

    <form class="layui-form"  enctype="multipart/form-data" method="post" action="" onsubmit="return false;">
        <div class="layui-form-item">
            <label class="layui-form-label">项目名称</label>
            <div class="layui-input-block">
                <input type="text" class="form-control layui-input" placeholder="请输入项目名称" required="required"
                       id="projectName"/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">访问名</label>
            <div class="layui-input-block">
                <input type="text" class="form-control layui-input" placeholder="请输入访问名" required="required"
                       id="visit-name"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">多个文件</label>
            <div class="layui-input-block">
                <input type="checkbox" name="switch" lay-skin="switch" lay-text="ON|OFF" lay-filter="switchTest"
                       value="1" title="开关" id="moreTxt">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">oss名称01</label>
            <div class="layui-input-block">
                <input type="text" class="form-control layui-input" placeholder="请输入点云oss存储名称" required="required"
                       id="first-save-name"/>
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">点云txt01</label>
            <div class="layui-input-block">
                <!--<button type="button" class="layui-btn multi-file " id="test1">-->
                <!--&lt;!&ndash;<i class="layui-icon">&#xe67c;</i>&ndash;&gt;选择文件-->
                <!--</button>-->

                <input type="file" name="first-file" id="first-file">
            </div>

            <!--<div class="layui-upload-list">-->
            <!--<table class="layui-table">-->
            <!--<thead>-->
            <!--<tr>-->
            <!--<th>文件名</th>-->
            <!--<th>oss名称</th>-->
            <!--<th>大小</th>-->
            <!--<th>状态</th>-->
            <!--<th>操作</th>-->
            <!--</tr>-->
            <!--</thead>-->
            <!--<tbody id="demoList"></tbody>-->
            <!--</table>-->
            <!--</div>-->


        </div>

        <div class="layui-form-item morepointcloud">
            <label class="layui-form-label">oss名称02</label>
            <div class="layui-input-block">
                <input type="text" class="form-control layui-input" placeholder="请输入点云oss存储名称" required="required"
                      id="second-save-name"/>
            </div>
        </div>

        <div class="layui-form-item morepointcloud">
            <label class="layui-form-label">点云txt02</label>
            <div class="layui-input-block">
                <!--<button type="button" class="layui-btn" id="test2">-->
                <!--&lt;!&ndash;<i class="layui-icon">&#xe67c;</i>&ndash;&gt;选择文件-->
                <!--</button>-->

                <input type="file" name="second-file" id="second-file">
            </div>
        </div>
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <!--<legend>响应式的表单集合</legend>-->
        </fieldset>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn"  id="submit">
                    <i class="layui-icon">&#xe67c;</i>上传点云
                </button>
                <!--<button type="reset" class="layui-btn layui-btn-primary">重置</button>-->
            </div>
        </div>


    </form>
</div>

<!--<input type="text" class="form-control" placeholder="点云oss存储名称" required="required" name="saveName" id="saveName"/>-->
<!--&lt;!&ndash;<input type="text" class="form-control" placeholder="点云url名称" required="required" name="urlName" id="urlName"/>&ndash;&gt;-->
<!--<input type="text" class="form-control" placeholder="项目名" required="required" name="projectName" id="projectName"/>-->

<!--<button type="button" class="layui-btn" id="test1">-->
<!--<i class="layui-icon">&#xe67c;</i>选择点云txt-->
<!--</button>-->

<!--<button type="button" class="layui-btn" id="test2">-->
<!--<i class="layui-icon">&#xe67c;</i>上传点云-->
<!--</button>-->

<script th:src="@{/js/jquery-3.3.1.js}" type="text/javascript"></script>

<script th:src="@{/layui/layui.js}"></script>
<!--<script th:src="@{/plugins/layui/layui.js}" type="text/javascript"></script>-->

<script th:inline="javascript">
    var ctx = [[@{
        /}]];

        layui.use(['form', 'upload'], function () {
            var upload = layui.upload;


            var form = layui.form;
            var multiFile = false;
            form.on('switch(switchTest)', function (data) {

                multiFile = this.checked;
                switch (this.checked) {
                    case true:
                        $('.morepointcloud').css('display', 'block');
                        break;
                    case false:
                        $('.morepointcloud').css('display', 'none');
                        break;
                }


            });


            $("#submit").click(function () {
                var formData = new FormData();

                if ($('#projectName').val() == "") {
                    layer.msg("请填写项目名");
                    return
                }

                if ($('#visit-name').val() == "") {
                    layer.msg("请填写访问名");
                    return
                }


                if (multiFile) {

                    //
                    if ($("#first-save-name").val()== "" || $("#second-save-name").val() == "") {
                        layer.msg("请输入oss保存名");
                        return
                    }

                    if ($('#first-file')[0].files[0]== undefined||$('#second-file')[0].files[0]== undefined) {
                        layer.msg("请选择文件");
                        return
                    }

                    // console.log($('#first-file')[0].files[0]);
                    // console.log($('#second-file')[0].files[0]);
                    formData.append("projectName", $('#projectName').val());
                    formData.append("visitName", $('#visit-name').val());
                    formData.append("firstFile", $('#first-file')[0].files[0]);
                    formData.append("secondFile", $('#second-file')[0].files[0]);
                    formData.append("firstSaveName", $("#first-save-name").val());
                    formData.append("secondSaveName", $("#second-save-name").val());

                    layer.load();
                    $.ajax({
                        url: ctx + 'uploadMultipart/',
                        type: "POST",
                        processData: false,
                        contentType: false,
                        data: formData,
                        success: function (res) {
                            layer.alert(res.msg);
                            layer.closeAll('loading'); //关闭loading
                        },
                        error:function (res) {
                            layer.alert("上传失败");
                            layer.closeAll('loading'); //关闭loading
                        }
                    });
                } else {

                    if ($("#first-save-name").val()== "") {
                        layer.msg("请输入oss保存名");
                        return
                    }
                    if ($('#first-file')[0].files[0]== undefined) {
                        layer.msg("请选择文件");
                        return
                    }
                    formData.append("projectName", $('#projectName').val());
                    formData.append("visitName", $('#visit-name').val());
                    formData.append("firstFile", $('#first-file')[0].files[0]);
                    formData.append("firstSaveName", $("#first-save-name").val());
                    layer.load();
                    $.ajax({
                        url: ctx + 'upload/',
                        type: "POST",
                        processData: false,
                        contentType: false,
                        data: formData,
                        success: function (res) {
                            layer.alert(res.msg);
                            layer.closeAll('loading'); //关闭loading
                        },
                        error:function () {
                            layer.alert("上传失败");
                            layer.closeAll('loading'); //关闭loading
                        }
                    });
                }


            });

            // //执行实例
            // var uploadInst = upload.render({
            //     elem: '#test1', //绑定元素
            //     url: ctx + 'upload/', //上传接口
            //     accept: 'file',
            //     multiple: false,
            //     auto: false,//选择文件后不自动上传
            //     // bindAction: '#submit', //指向一个按钮触发上传
            //     data: {
            //         saveName: function () {
            //             // return $(".save-name-input")[0].value;
            //             return "test7-1";
            //         },
            //         projectName: function () {
            //             return $('#projectName').val();
            //         }
            //     },
            //
            //
            //     // choose: function (obj) {
            //     //     demoListView.empty();
            //     //
            //     //     var files = obj.pushFile(); //将每次选择的文件追加到文件队列
            //     //
            //     //     //读取本地文件
            //     //     obj.preview(function (index, file, result) {
            //     //
            //     //         var tr = $(['<tr id="upload-' + index + '">'
            //     //             , '<td>' + file.name + '</td>'
            //     //             , '<td>'
            //     //             , '<input type="text" class="form-control layui-input save-name-input" placeholder="请输入点云oss存储名称" required="required"  />'
            //     //             , '</td>'
            //     //             , '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>'
            //     //             , '<td>等待上传</td>'
            //     //             , '<td>'
            //     //             // , '<button class="layui-btn layui-btn-mini demo-reload layui-hide">重传</button>'
            //     //             , '<button class="layui-btn layui-btn-mini layui-btn-danger demo-delete">删除</button>'
            //     //             , '</td>'
            //     //             , '</tr>'].join(''));
            //     //
            //     //         //单个重传
            //     //         tr.find('.demo-reload').on('click', function () {
            //     //             obj.upload(index, file);
            //     //         });
            //     //
            //     //         //删除
            //     //         tr.find('.demo-delete').on('click', function () {
            //     //             delete files[index]; //删除对应的文件
            //     //             tr.remove();
            //     //             uploadInst.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
            //     //
            //     //             // var fileLIst=formData.get("file[]");
            //     //             // console.log(fileLIst);
            //     //             formData.delete("file[]")
            //     //
            //     //
            //     //             var arr = Object.keys(files);
            //     //             var len = arr.length;
            //     //             for (var i = 0; i < len; i++) {
            //     //                 formData.append('file[]', files[arr[i]]);
            //     //
            //     //             }
            //     //
            //     //             console.log(formData);
            //     //         });
            //     //
            //     //         demoListView.append(tr);
            //     //
            //     //         formData.append('file[]', file);
            //     //         console.log(file)
            //     //
            //     //
            //     //
            //     //
            //     //     });
            //     // },
            //
            //     before: function () {
            //         //上传前回调
            //         layer.load();
            //
            //         obj.preview(function(index, file, result){
            //             $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
            //         });
            //
            //
            //     },
            //
            //     done: function (res) {
            //         //上传完毕回调
            //         console.log(res);
            //         layer.alert(res.msg);
            //         layer.closeAll('loading'); //关闭loading
            //     },
            //     error: function (err) {
            //         //请求异常回调
            //         console.log(err);
            //
            //         layer.alert("请求失败");
            //         layer.closeAll('loading'); //关闭loading
            //     }
            // });
        });

</script>
</body>
</html>